<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    *{padding: 0;margin: 0;}
        form{
            width: 150px;
            height: 300px;
            background: #ccc;
            padding:5px;
            font-size: 14px;
            margin: 50px auto;
        }
        form div{
            height: 20px;
            overflow: hidden;
            margin-bottom: 5px
        }
        select{
            width: 100px;
            text-indent: 10px;
            float: right;
        }
        select{
            display: none;
        }
        
        .none{
            display: none;
        }
        .block{
            display: block;
        }
    </style>
</head>
<body>
    <form action="#">
        <div>
            省份：
            <select name="" id="pro" class="block">
                <option value="0">河南</option>
                <option value="1">河北</option>
                <option value="2">山东</option>
            </select>
        </div>
        <div id="city">
            城市：
            <select name="" class="block">
                <option value="0">郑州</option>
                <option value="1">洛阳</option>
                <option value="2">开封</option>
            </select>
            <select name="">
                <option value="0">石家庄1</option>
                <option value="1">石家庄2</option>
            </select>
            <select name="">
                <option value="0">山东1</option>
                <option value="1">山东2</option>
            </select>
        </div>
        <div id="district">
            <div class="block">
                区：
                <select name="" class="block">
                    <option value="0">郑州A区</option>
                    <option value="1">郑州B区</option>
                </select>
                <select name="">
                    <option value="0">洛阳A区</option>
                    <option value="1">洛阳B区</option>
                </select>
                <select name="">
                    <option value="0">开封A区</option>
                    <option value="1">开封B区</option>
                </select>
            </div>
            <div>
                区：
                <select name="" class="block">
                    <option value="0">石1A区</option>
                    <option value="1">石1B区</option>
                </select>
                <select name="">
                    <option value="0">石2A区</option>
                    <option value="1">石2B区</option>
                </select>
            </div>
            <div>
                区：
                <select name="" class="block">
                    <option value="0">山1A区</option>
                    <option value="1">山1B区</option>
                </select>
                <select name="">
                    <option value="0">山2A区</option>
                    <option value="1">山2B区</option>
                </select>
            </div>
        </div>
    </form>
    <script>
    var pro = document.getElementById("pro");
    var city = document.getElementById("city");
    var dist = document.getElementById("district");
    pro.onchange = function(){//选择省时
        for(var i=0;i<city.children.length;i++){
            city.children[i].className = "none";//排他：所有市隐藏
        }
        city.children[this.value].className = "block";//对应市 block
        for(var i=0;i<dist.children.length;i++){
            dist.children[i].className = "none";//排他：所有区隐藏
        }
        dist.children[this.value].className = "block";//对应区 block

    }

    for(var i=0;i<city.children.length;i++){
        city.children[i].index = i;
        city.children[i].onchange = function(){//选择市时
            for(var i=0;i<dist.children.length;i++){
                dist.children[i].className = "none";//排他：所有区隐藏
            }
            dist.children[this.index].className = "block";//对应省的区 block
            for(var i=0;i<dist.children[0].children.length;i++){
                dist.children[this.index].children[i].className = "none";//排他：所有区隐藏
            
            }
            dist.children[this.index].children[this.value].className = "block";//对应区 block
        }   
    }
    </script>
</body>
</html>